<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us">
<!--<![endif]-->

<head>
    <meta charset="utf-8">

    <title>Bs Quick View Plugin - A NopCommerce Professional Plugin</title>

    <meta name="description" content="">
    <meta name="author" content="NopStation-23">
    <meta name="copyright" content="NopStation-23">
    <meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
    <meta name="date" content="2014-09-05T00:00:00+02:00">

    <link rel="stylesheet" href="assets/css/documenter_style.css" media="all">


    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <script src="assets/js/jquery.js"></script>

    <script src="assets/js/jquery.scrollTo.js"></script>
    <script src="assets/js/jquery.easing.js"></script>

    <script>
        document.createElement('section');
        var duration = '450',
            easing = 'easeOutExpo';
    </script>
    <script src="assets/js/script.js"></script>

    <style>
        html {
            background-color: #FFFFFF;
            color: #383838;
        }
        ::-moz-selection {
            background: #444444;
            color: #DDDDDD;
        }
        ::selection {
            background: #444444;
            color: #DDDDDD;
        }
        #documenter_sidebar #documenter_logo {
            background-image: url(assets/images/image_1.png);
            background-size: 146px;
        }
        a {
            color: #0044CC;
        }
        .btn {
            border-radius: 3px;
        }
        .btn-primary {
            background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
            background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
            background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
            background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
            background-image: -o-linear-gradient(top, #0088CC, #0044CC);
            background-image: linear-gradient(top, #0088CC, #0044CC);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
            border-color: #0044CC #0044CC #bfbfbf;
            color: #FFFFFF;
        }
        .btn-primary:hover,
        .btn-primary:active,
        .btn-primary.active,
        .btn-primary.disabled,
        .btn-primary[disabled] {
            border-color: #0088CC #0088CC #bfbfbf;
            background-color: #0044CC;
        }
        hr {
            border-top: 1px solid #EBEBEB;
            border-bottom: 1px solid #FFFFFF;
        }
        #documenter_sidebar,
        #documenter_sidebar ul a {
            background-color: #DDDDDD;color:#222222;http://static.revaxarts-themes.com/noise.gif}
            #documenter_sidebar ul a {
                -webkit-text-shadow: 1px 1px 0px #EEEEEE;
                -moz-text-shadow: 1px 1px 0px #EEEEEE;
                text-shadow: 1px 1px 0px #EEEEEE;
            }
            #documenter_sidebar ul {
                border-top: 1px solid #AAAAAA;
            }
            #documenter_sidebar ul a {
                border-top: 1px solid #EEEEEE;
                border-bottom: 1px solid #AAAAAA;
                color: #444444;
            }
            #documenter_sidebar ul a:hover {
                background: #444444;
                color: #DDDDDD;
                border-top: 1px solid #444444;
            }
            #documenter_sidebar ul a.current {
                background: #444444;
                color: #DDDDDD;
                border-top: 1px solid #444444;
            }
            #documenter_copyright {
                display: block !important;
                visibility: visible !important;
            }
    </style>

</head>

<body class="documenter-project-bs-quick-view-plugin-">
    <div id="documenter_sidebar">
        <a href="#documenter_cover" id="documenter_logo"></a>
        <ul id="documenter_nav">
            <li><a class="current" href="#documenter_cover">Start</a>
            </li>

            <li><a href="#installation" title="Installation">Installation</a>
            </li>
            <li><a href="#settings" title="Settings">Settings</a>
            </li>
            <li><a href="#views" title="Views">Views</a>
            </li>
            <li><a href="#Customization" title="Customization">Customization</a>
            </li>
            <li><a href="#help" title="Help">Help</a>
            </li>

        </ul>
        <div id="documenter_copyright">Copyright NopStation-23 2014
            <br>made with the <a href="http://rxa.li/documenter">Documenter v2.0</a> 
        </div>
    </div>
    <div id="documenter_content">
        <section id="documenter_cover">
            <h1>Bs Quick View Plugin </h1>
            <h2>A NopCommerce Professional Plugin</h2>
            <div id="documenter_buttons">
                <a href="http://demo-plugin.nop-station.com/" class="btn btn-primary btn-large">Live Demo</a> 
            </div>
            <hr>
            <ul>
                <li>created: 09/05/2014</li>
                <li>latest update: 09/05/2014</li>
                <li>by: NopStation-23</li>
                <li><a href="http://nop-station.com/">nop-station.com/</a>
                </li>
                <li>email: <a href="mailto:&#110;&#111;&#112;&#115;&#116;&#97;&#116;&#105;&#111;&#110;&#64;&#110;&#111;&#112;&#45;&#115;&#116;&#97;&#116;&#105;&#111;&#110;&#46;&#99;&#111;&#109;">&#110;&#111;&#112;&#115;&#116;&#97;&#116;&#105;&#111;&#110;&#64;&#110;&#111;&#112;&#45;&#115;&#116;&#97;&#116;&#105;&#111;&#110;&#46;&#99;&#111;&#109;</a>
                </li>
            </ul>
            <p></p>
        </section>

        <section id="installation">
            <div class="page-header">
                <h3>Installation</h3>
                <hr class="notop">
            </div>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                To install this plugin you &nbsp;must first have nopcommerce. Here&#39;s the official nopcommerce website&nbsp;<a href="http://www.nopcommerce.com/" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); text-decoration: none; cursor: pointer;">http://www.nopcommerce.com/</a>
            </p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                Then you have to download the plugin. Here is the download link of QuickView plugin&nbsp;<a href="http://www.demo_link_quickview_plugin/" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); text-decoration: none; cursor: pointer;">http://www.demo_link_QuickView_Plugin</a>
            </p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                Now, b<span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline; color: rgb(64, 61, 62);">efore you can use the <strong>BS</strong>&nbsp;</span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline; color: rgb(64, 61, 62);">Quick View</span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline; color: rgb(64, 61, 62);">&nbsp;plugin you need to install it in&nbsp;</span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline; color: rgb(64, 61, 62);">nopCommerce</span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline; color: rgb(64, 61, 62);">.</span>
            </p>
            <ul style="margin: 18px 0px; padding-right: 0px; padding-left: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                <li style="margin: 0px 0px 0px 36px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style: square;">
                    <span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;">After you download the Plugin, you have to extract the .zip folder. Use your favourite extractor to unzip the folder and there you will get a file named BrainStation.QuickView. This is the plugin folder.</span>
                </li>
                <li style="margin: 0px 0px 0px 36px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style: square;">
                    <span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;">Then copy the BrainStation.QuickView&nbsp;folder to the&nbsp;Plugin folder of your nopCommerce.</span>
                </li>
                <li style="margin: 0px 0px 0px 36px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style: square;">
                    <span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;">Go to admin panel and select Configuration&gt;Plugins. Hit &quot;Reload list of plugins&quot; button. Find the Quick View plugin from there. Hit Install.&nbsp;</span>
                </li>
            </ul>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                You will see that two submenu named &#39;Settings&#39; &amp; &#39;Help&#39; has been adden on a menu named &#39;Bs Quick View&#39;. Here is a screen shot for your ease.&nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">
                &nbsp;</p>
            <p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);">

                <h2 style="margin: 0px 0px 18px; padding: 0px; border: 0px; outline: 0px; font-weight: 100; font-size: 20px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);">
	&nbsp;</h2>
        </section>
        <section id="settings">
            <div class="page-header">
                <h3>Settings</h3>
                <hr class="notop">
            </div>
            <p>
                In settings submenu there are few settings that will configuare the behavior of &#39;BS Quick View&#39; plugin. They are-</p>
            <ol>
                <li>
                    <span style="color: rgb(51, 51, 51); font-family: arial, verdana, helvetica, sans-serif; white-space: nowrap;">Enable QuickView Widget<br>
		<br>
		If you check this opton you will enable the widget of the Bs Quick View plugin. Disabling the checking will make the all settings of Bs Quick View inactive.</span>
                    <br>&nbsp;
                </li>
                <li>
                    <span style="color: rgb(51, 51, 51); font-family: arial, verdana, helvetica, sans-serif; white-space: nowrap;">Enable Enlarging Product Pictures<br>
		<br>
		If you check this opton you will have a splendid view of enlarged picture on each product box items .After checking &amp; saving it reload your main store page and hover on the product pictures in product box and see the awosomeness.</span>
                    <br>&nbsp;
                </li>
                <li>
                    <span style="color: rgb(51, 51, 51); font-family: arial, verdana, helvetica, sans-serif; white-space: nowrap;">Show Also Purchased Products<br>
		<br>
		This Option will activate showing the Products which was also purchased with the clicked product on Modal named &quot;Customers who bought this item also bought&quot;.</span>
                    <br>&nbsp;
                </li>
                <li>
                    <span style="color: rgb(51, 51, 51); font-family: arial, verdana, helvetica, sans-serif; white-space: nowrap;">Show Related Products&nbsp;<br>
		<br>
		This Option will activate showing the related Products on Modal.</span>
                    <br>&nbsp;
                </li>
                <li>
                    <span style="color: rgb(51, 51, 51); font-family: arial, verdana, helvetica, sans-serif; white-space: nowrap;">Button Container Class<br>
		<br>
		Provide the class name in which the button &quot;Quick View&quot; will appear. Remember add a &#39;.&#39; before class name . eg(.buttons)</span>
                    <br>
                    <br>&nbsp;
                </li>
            </ol>


            Here is the screenshot of the settings page of 'Bs Quick View' Plugin-
            <br/>
            <br/>
            <img src="assets/images/settings.jpg">
        </section>
        <section id="views">
            <div class="page-header">
                <h3>Views</h3>
                <hr class="notop">
            </div>
            <p>
                Here is the ultimate view that will be added or popped up in the store website :<br/><br/>
                
            </p>
            <img src="assets/images/first_view.jpg"/><br/><br/>
            <img src="assets/images/second_view.jpg"/><br/><br/>
        </section>
        
        <section id="Customization">
            <div class="page-header">
                <h3>Customization</h3>
                <hr class="notop">
            </div>
            <p>
                The 'Bs Quick View' plugin mostly supports 'E-Shopper Bootstrap theme (Free)' and other Bootstrap themes. Plugin Views and the 'Quick View' Button can be changed by customizing style.css file.<br/><br/>
                
                <br/>Here is styles.css : 
                <pre>
/*-------------------------------------------------*\
    Product Details modal css start
\*--------------------------------------------------*/
#quick-view-product-details-modal > .modal-dialog { width: 900px; }

#quick-view-product-details-modal .modal-content { position: relative; background-color: #ffffff; border: none; border-radius: 0px; }

#quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span { /*background: #00abe4;*/ height: 40px; width: 80px; position: absolute; z-index: 1; }

    #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.left-controller { background: #00abe4; height: 40px; width: 40px; position: absolute; border-right: 1px solid rgba(255,255,255,0); padding: 6px 15px; color: #2B2b2B; }

        #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.left-controller:hover { color: #FFFFFF; background-color: #2B2B2B; }

    #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.right-controller { background: #00abe4; position: absolute; left: 40px; padding: 6px 16px; color: #2B2b2B; }

        #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.right-controller:hover { color: #FFFFFF; background-color: #2B2B2B; }


.quick-view-product-details-slide-image { width: 100%; height: 400px; border: 1px solid #e1e4e6; }

    .quick-view-product-details-slide-image img { width: 100%; height: 400px; }

#quick-view-product-details-modal .old-product-price span { text-decoration: line-through; }

#quick-view-product-details-modal .product-price span { font-size: 1.6em; }

.quick-view-product-modals .form-control { border-radius: 0; }

.quick-view-product-modals .btn.btn-default { color: #fff; background-color: #00abe4; border-color: #FFFFFF; border-radius: 0px; }

    .quick-view-product-modals .btn.btn-default:hover { color: #fff; background-color: #2B2b2B; border-color: #FFFFFF; }

.quick-view-product-modals .nav-tabs li a { border-radius: 0px; color: #2B2B2B; text-decoration: none; background-size: 100% 200%; background-image: linear-gradient(to top, #5b6064 50%, #ffffff 50%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -ms-transition: all .3s; }

    .quick-view-product-modals .nav-tabs li a:hover { color: #FFFFFF; text-decoration: none; background-position: 0 -100%; }

.quick-view-product-modals .nav-tabs li.active a { color: #FFFFFF; text-decoration: none; background-position: 0 -100%; }

.quick-view-product-modals .tab-pane { border: 1px solid #eee; clear: both; color: #555; margin-bottom: .3em; padding: 10px; }

.quick-view-variant-picture img { height: 100%; width: 100%; }

.quick-view-square-box { border-radius: 0px; }

#modal-product-picture-carousal .item { padding-left: 0px; }
.bs-add-to-cart-panel button.btn.btn-primary { margin-top: 0px; }
.quick-view-menu-product-details-nav { margin-bottom: 30px; }
/*-------------------------------------------------*\
    Product Details modal css end
\*--------------------------------------------------*/

/*-------------------------------------------------*\
    Product Details Loading modal css start
\*--------------------------------------------------*/
.align-in-center { margin: auto; }

#quick-view-loading-modal > .modal-dialog { width: 900px; }

#quick-view-loading-modal .modal-content { box-shadow: none; position: relative; background: none; border: none; border-radius: 0px; text-align: center; margin-top: 30%; }


/*-------------------------------------------------*\
    Product Details Loading modal css end
\*--------------------------------------------------*/


/*-------------------------------------------------*\
    Product List button css start
\*--------------------------------------------------*/

.product-list .productinfo .buttons { position: absolute; right: 0px; }
.productinfo .buttons a.btn-default:hover { background: #FE980F; }
.product-list .productinfo a { position: relative; }
    .product-list .productinfo a.image-a { position: absolute; max-width: 200px; left: 0px; top: 0px; height: 240px; }
/*-------------------------------------------------*\
    Product List button css end
\*--------------------------------------------------*/

                </pre>
            </p>
            
        </section>

        <section id="help">
            <div class="page-header">
                <h3>Help</h3>
                <hr class="notop">
            </div>
            <p>
                For any Help please contact us or geft our support here <a href="http://nop-station.com/Common/Support">www.nop-station.com</a>
            </p>
        </section>

    </div>
</body>

</html>